Овладяване на ориентацията на екрана: Цялостно ръководство за управление на ротацията на устройството

В днешния свят на множество устройства, правилното управление на ориентацията на екрана е от решаващо значение за осигуряването на положително потребителско изживяване. Независимо дали става въпрос за смартфон, таблет или дори сгъваемо устройство, потребителите очакват приложенията да се адаптират безпроблемно, когато завъртат устройството си. Това ръководство предоставя цялостен преглед на управлението на ротацията на устройството, като обхваща различни платформи и техники, за да гарантира, че вашите приложения са адаптивни и лесни за употреба.

Разбиране на ориентацията на екрана

Ориентацията на екрана се отнася до посоката, в която съдържанието се показва на екрана на устройството. Двете основни ориентации са:

• Портретна (Portrait): Екранът е по-висок, отколкото широк. Това е типичната ориентация за смартфони.
• Пейзажна (Landscape): Екранът е по-широк, отколкото висок. Често се предпочита за гледане на видеоклипове или играене на игри.

Някои устройства и приложения поддържат също:

• Обърната портретна: Портретна ориентация с устройство, завъртяно на 180 градуса.
• Обърната пейзажна: Пейзажна ориентация с устройство, завъртяно на 180 градуса.

Защо да се управляват промените в ориентацията на екрана?

Неуспехът при управлението на промените в ориентацията на екрана може да доведе до различни проблеми, включително:

• Проблеми с оформлението: Елементите може да са неправилно подравнени, отрязани или да се припокриват.
• Загуба на данни: В някои случаи състоянието на активността (activity) или приложението може да бъде загубено при завъртане на екрана.
• Лошо потребителско изживяване: Рязкото или прекъснато изживяване може да разочарова потребителите и да навреди на репутацията на вашето приложение.
• Проблеми с производителността: Честото прерисуване и изчисления на оформлението могат да повлияят на производителността, особено на по-стари устройства.

Управление на ориентацията на екрана на различни платформи

Специфичните техники за управление на ориентацията на екрана варират в зависимост от платформата, за която разработвате. Нека разгледаме някои от най-популярните платформи:

1. Android

Android предоставя няколко механизма за управление на промените в ориентацията на екрана. Най-често срещаните подходи включват:

a. Промени в конфигурацията (Configuration Changes)

По подразбиране Android пресъздава Activity, когато ориентацията на екрана се промени. Това означава, че методът `onCreate()` се извиква отново и цялото оформление се презарежда. Въпреки че това може да е полезно за пълно преструктуриране на потребителския интерфейс въз основа на ориентацията, може да бъде и неефективно, ако просто трябва леко да коригирате оформлението.

За да предотвратите пресъздаването на Activity, можете да декларирате, че вашето Activity обработва промяната в конфигурацията `orientation` във файла `AndroidManifest.xml`:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

С добавянето на `orientation` и `screenSize` (важно за API ниво 13 и по-високо) вие казвате на системата, че вашето Activity ще се справи само с промените в ориентацията. Когато екранът се завърти, ще бъде извикан методът `onConfigurationChanged()`.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Check the orientation of the screen
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

Вътре в `onConfigurationChanged()` можете да актуализирате потребителския интерфейс въз основа на новата ориентация. Този подход е по-ефективен от пресъздаването на Activity, тъй като избягва ненужното зареждане на ресурси и презареждане на оформлението.

b. Запазване и възстановяване на състоянието на Activity

Дори ако сами обработвате промяната в конфигурацията, все пак може да се наложи да запазите и възстановите състоянието на Activity. Например, ако вашето Activity има текстово поле, ще искате да запазите текста, който потребителят е въвел, когато екранът се завърти.

Можете да използвате метода `onSaveInstanceState()` за запазване на състоянието на Activity и метода `onRestoreInstanceState()` за неговото възстановяване.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Алтернативно, можете да използвате ViewModels със SavedStateHandle за управление и запазване на данни, свързани с потребителския интерфейс, при промени в конфигурацията, което е по-модерен и препоръчителен подход.

c. Алтернативни оформления

Android ви позволява да предоставяте различни файлове за оформление за различните ориентации на екрана. Можете да създадете отделни файлове за оформление в директориите `res/layout-land/` и `res/layout-port/`. Когато екранът се завърти, Android автоматично ще зареди подходящия файл за оформление.

Този подход е полезен, когато потребителският интерфейс трябва да бъде значително различен в пейзажна и портретна ориентация. Например, може да искате да покажете оформление с два панела в пейзажен режим и с един панел в портретен.

d. Използване на ConstraintLayout

ConstraintLayout е мощен мениджър на оформлението, който ви позволява да създавате гъвкави и адаптивни оформления. С ConstraintLayout можете да дефинирате ограничения (constraints), които указват как изгледите (views) трябва да бъдат позиционирани един спрямо друг и спрямо родителското оформление. Това улеснява създаването на оформления, които се адаптират към различни размери на екрана и ориентации.

2. iOS

iOS също предоставя механизми за управление на промените в ориентацията на екрана. Ето някои често срещани подходи:

a. Auto Layout

Auto Layout е система за оформление, базирана на ограничения, която ви позволява да дефинирате правила за позиционирането и оразмеряването на изгледите. Ограниченията на Auto Layout гарантират, че вашият потребителски интерфейс се адаптира към различни размери на екрана и ориентации.

Когато използвате Auto Layout, обикновено дефинирате ограничения, които указват връзките между изгледите. Например, може да ограничите един бутон да бъде центриран хоризонтално и вертикално в рамките на родителския си изглед. Когато екранът се завърти, Auto Layout енджинът автоматично преизчислява позициите и размерите на изгледите, за да удовлетвори ограниченията.

b. Size Classes

Size classes са начин за категоризиране на размерите и ориентациите на екрана. iOS дефинира два класа размери: `Compact` (компактен) и `Regular` (стандартен). Едно устройство може да има различни класове размери за своята ширина и височина. Например, iPhone в портретна ориентация има `Compact` клас за ширина и `Regular` клас за височина. В пейзажен режим той често има `Compact` височина и `Compact` или `Regular` ширина в зависимост от модела.

Можете да използвате size classes, за да персонализирате потребителския си интерфейс въз основа на размера и ориентацията на екрана. Например, може да искате да покажете различен набор от изгледи или да използвате различни шрифтове за различните класове размери.

Можете да конфигурирате различни ограничения и дори да инсталирате/деинсталирате изгледи въз основа на size classes директно в Interface Builder или програмно.

c. Методи за ротация на View Controller

iOS предоставя няколко метода в класа UIViewController, които се извикват при завъртане на устройството:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Извиква се преди изгледът на view controller-а да бъде преоразмерен за преход.
• viewWillLayoutSubviews(): Извиква се точно преди изгледът на view controller-а да подреди своите подизгледи.
• viewDidLayoutSubviews(): Извиква се веднага след като изгледът на view controller-а е подредил своите подизгледи.

Можете да предефинирате (override) тези методи, за да извършвате персонализирани корекции на оформлението при завъртане на екрана.

d. Notification Center

Можете да слушате за известия за промяна на ориентацията, използвайки Notification Center:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

3. Уеб разработка (HTML, CSS, JavaScript)

В уеб разработката можете да използвате CSS медийни заявки (media queries) и JavaScript, за да управлявате промените в ориентацията на екрана.

a. CSS медийни заявки

Медийните заявки ви позволяват да прилагате различни стилове въз основа на размера на екрана, ориентацията и други характеристики. Можете да използвате медийната характеристика `orientation`, за да се насочите към конкретни ориентации.

/* Portrait orientation */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Landscape orientation */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Можете да използвате медийни заявки, за да коригирате оформлението, шрифтовете и други стилове въз основа на ориентацията.

b. JavaScript

Можете да използвате JavaScript, за да откривате промени в ориентацията на екрана и да извършвате персонализирани действия. `screen.orientation` API предоставя информация за текущата ориентация.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Алтернативно, можете да използвате `matchMedia` API с медийни заявки:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript може да се използва за динамично коригиране на оформлението, зареждане на различни ресурси или извършване на други действия въз основа на ориентацията.

c. Рамки за адаптивен дизайн (Responsive Design Frameworks)

Рамки като Bootstrap, Foundation и Materialize CSS предоставят вградена поддръжка за адаптивен дизайн, което улеснява създаването на оформления, които се адаптират към различни размери на екрана и ориентации. Тези рамки обикновено използват грид система и медийни заявки за създаване на гъвкави и адаптивни потребителски интерфейси.

Най-добри практики за управление на ориентацията на екрана

Ето някои най-добри практики, които да имате предвид при управлението на промените в ориентацията на екрана:

• Избягвайте ненужното пресъздаване на Activity/ViewController: Ако е възможно, обработвайте промяната в конфигурацията сами, за да избегнете натоварването от пресъздаването на Activity или ViewController.
• Запазвайте и възстановявайте състоянието: Винаги запазвайте и възстановявайте състоянието на Activity/ViewController, за да предотвратите загуба на данни. Използвайте ViewModels за по-надеждно управление на състоянието.
• Използвайте Auto Layout или ConstraintLayout: Тези системи за оформление улесняват създаването на гъвкави и адаптивни оформления.
• Тествайте на множество устройства: Тествайте приложението си на различни устройства с различни размери на екрана и ориентации, за да се уверите, че работи правилно.
• Помислете за достъпността: Уверете се, че приложението ви остава достъпно за потребители с увреждания, когато екранът се завърти.
• Осигурете ясни визуални знаци: Ако потребителският интерфейс се променя значително при завъртане на екрана, осигурете ясни визуални знаци, които да помогнат на потребителите да разберат промените.
• Избягвайте налагането на конкретна ориентация (освен ако не е необходимо): Позволете на потребителите да използват устройството си в предпочитаната от тях ориентация, когато е възможно. Налагането на ориентация може да бъде разочароващо и неудобно. Заключвайте ориентацията само ако е от решаващо значение за функционалността на приложението (напр. игра, която изисква пейзажен режим). Ако заключите ориентацията, ясно съобщете причината на потребителя.
• Оптимизирайте за производителност: Минимизирайте количеството работа, което трябва да се извърши при завъртане на екрана, за да избегнете проблеми с производителността.
• Използвайте относителни единици: Когато дефинирате размери и позиции във вашето оформление, използвайте относителни единици (напр. проценти, `dp`, `sp`) вместо абсолютни единици (напр. пиксели), за да гарантирате, че потребителският ви интерфейс се мащабира правилно на различни размери на екрана.
• Използвайте съществуващи библиотеки и рамки: Възползвайте се от съществуващи библиотеки и рамки, които предоставят поддръжка за адаптивен дизайн и управление на ориентацията на екрана.

Заключване на ориентацията и потребителско изживяване

Въпреки че обикновено е най-добре да позволите на потребителите да завъртат устройствата си свободно, има ситуации, в които може да искате да заключите ориентацията на екрана. Например, видео плейър на цял екран може да заключи ориентацията в пейзажен режим за оптимално гледане.

Въпреки това е важно да използвате заключването на ориентацията пестеливо и да предоставите ясна причина на потребителя. Налагането на ориентация може да бъде разочароващо и да направи приложението ви по-малко достъпно.

Как да заключим ориентацията на екрана

Android

Можете да заключите ориентацията на екрана в Android, като зададете атрибута `screenOrientation` във файла `AndroidManifest.xml`:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Можете също да заключите ориентацията програмно:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

В iOS можете да посочите поддържаните ориентации във файла `Info.plist`. Можете също да предефинирате метода `supportedInterfaceOrientations` във вашия view controller:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Глобални съображения

Когато проектирате за глобална аудитория, имайте предвид следното относно ориентацията на екрана:

• Оформления отдясно-наляво (RTL): Помислете как потребителският ви интерфейс ще се адаптира към RTL езици. Някои езици, като арабски и иврит, се пишат отдясно наляво. Уверете се, че оформлението ви се огледално отразява правилно в RTL режим. Auto Layout и ConstraintLayout често предоставят вградена поддръжка за RTL оформления.
• Културни предпочитания: Бъдете наясно с културните предпочитания, свързани с използването на устройства. Въпреки че повечето потребители са свикнали както с портретен, така и с пейзажен режим, някои култури може да имат леки предпочитания. Тестването с потребители от различни региони може да предостави ценни прозрения.
• Достъпност за различни потребители: Винаги давайте приоритет на достъпността. Уверете се, че вашето приложение е използваемо от хора с увреждания, независимо от ориентацията на екрана. Това включва предоставяне на алтернативен текст за изображения, осигуряване на достатъчен цветови контраст и поддръжка на помощни технологии.

Тестване на управлението на ориентацията на екрана

Цялостното тестване е от съществено значение, за да се гарантира, че вашето приложение управлява правилно промените в ориентацията на екрана. Ето няколко съвета за тестване:

• Използвайте емулатори и реални устройства: Тествайте приложението си както на емулатори, така и на реални устройства, за да покриете по-широк кръг от размери на екрана и хардуерни конфигурации.
• Тествайте в различни ориентации: Тествайте приложението си както в портретна, така и в пейзажна ориентация, както и в обърната портретна и обърната пейзажна, ако се поддържат.
• Тествайте с различни размери на екрана: Тествайте приложението си на устройства с различни размери на екрана, за да се уверите, че потребителският интерфейс се мащабира правилно.
• Тествайте с различни размери на шрифта: Тествайте приложението си с различни размери на шрифта, за да се уверите, че текстът остава четлив.
• Тествайте с активирани функции за достъпност: Тествайте приложението си с активирани функции за достъпност като екранни четци, за да се уверите, че то остава достъпно за потребители с увреждания.
• Автоматизирано тестване: Внедрете автоматизирани UI тестове, които обхващат промени в ориентацията на екрана. Това може да помогне за улавяне на регресии и да осигури последователно поведение при различните версии.

Заключение

Ефективното управление на ориентацията на екрана е критичен аспект на мобилната и уеб разработката. Като разбирате различните техники, налични на всяка платформа, и следвате най-добрите практики, можете да създавате приложения, които осигуряват безпроблемно и приятно потребителско изживяване, независимо от това как потребителят държи устройството си. Не забравяйте да дадете приоритет на тестването и да вземете предвид глобалните последици от вашите дизайнерски решения, за да гарантирате, че вашето приложение е достъпно и лесно за употреба от разнообразна аудитория.